<template>
  <s-container >

    <template #toolBar>
      <!-- <n-button type="primary" @click="getList">刷新</n-button> -->
      <NButton size="small" @click="getList">
        <template #icon>
          <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
        </template>
        刷新
      </NButton>
    </template>

    <template #dataTable>
        <s-data-table :list="list" :columns="columns" :loading="loading" />
    </template>
  </s-container>
</template>

<script setup lang='tsx'>
import { DataTableColumn } from 'naive-ui';
import { onMounted, reactive, ref } from 'vue';
import useLoadingEmpty from '~/src/hooks/common/loading';
import { fetchOnlineUsers, fetchRetreatUser } from '~/src/service/api/monitor/online';
import { OnlineUser } from './index';
import PopconfirmBtn from "~/src/components/custom/popconfirm-btn.vue"
const { loading,startLoading,endLoading } = useLoadingEmpty();
interface DataSource extends OnlineUser { }
const columns: DataTableColumn<DataSource>[] = [
  {
    title: '用户名',
    key: 'username',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: 'ip地址',
    key: 'ip',
    align: 'center',
    ellipsis: {
      tooltip: true
    },
  },
  {
    title: '登录地点',
    key: 'location',
    align: 'center',
    ellipsis: {
      tooltip: true
    },
  },
  {
    title: '设备',
    key: 'os',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '登录时间',
    key: 'loginTime',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: "操作列",
    key: "edit",
    align: 'center',
    width: 200,
    fixed: 'right',
    render(rowData: DataSource) {
      return <PopconfirmBtn confirmText={`是否确认强退${rowData.username}`} btnStr="强退" type="warning" size='small' ghost={true} onPositiveClick={() => handleRetreat(rowData)} >强退</PopconfirmBtn>
    }
  }
];
const pageObj = reactive<Common.Page<DataSource>>({ total: 0, size: 10, current: 1 })
const list = ref<DataSource[]>([])


async function getList() {
  startLoading()
  const { data,error } = await fetchOnlineUsers(pageObj)
  if(!error) {
    list.value = data || []
  }
  setTimeout(()=>{
    endLoading()
  },1000)

}

async function handleRetreat(row: DataSource) {
  const { error } = await fetchRetreatUser(row.userId!)
  if (!error)
    window.$message?.success("操作成功")
  getList()
}

onMounted(() => {
  getList()
})
</script>

<style lang='scss' scoped></style>
